<template>
  <div class="distributedWhole">
    <div class="crumbs">
      <a-breadcrumb>
        <a-breadcrumb-item v-for="(item, index) in $route.matched" :key="index">
          <span v-if="index + 1 < $route.matched.length">{{
              item.meta.title
            }}</span>
          <router-link
              v-if="index + 1 == $route.matched.length"
              :to="item.path"
          >{{ item.meta.title }}
          </router-link
          >
        </a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div class="addDistributed">
      <a-button :class="butAdmin" class="userAbut" type="primary" @click="addDistributed"
      >+新建
      </a-button
      >
    </div>
    <a-table
        :class="TableAdmin"
        class="aTable"
        rowKey="id"
        :columns="columns"
        :data-source="data1"
        :pagination="pagination"
    >
      <template slot="operations" slot-scope="text, record">
        <div class="editable-row-operations">
          <span>
            <a-popconfirm
                v-if="data1.length"
                title="确认删除?"
                @confirm="() => Delete(record.id)"
            >
              <a href="javascript:;" title="删除">
                <a-icon type="delete" style="color: red; fontsize: 16px"/>
              </a>
            </a-popconfirm>
          </span>
          <span class="jiange"></span>
          <span>
            <a href="javascript:;" @click="edit(record.id)" title="编辑">
              <a-icon type="edit" style="color: #7a7d7e; fontsize: 16px"/>
            </a>
          </span>
        </div>
      </template>
      <span slot="num" slot-scope="text, record, index">
        {{
          (pagination.current - 1) * pagination.pageSize + parseInt(index) + 1
        }}
      </span>
    </a-table>
    <div class="Loading" v-show="Loading">
      <a-spin tip="Loading..."></a-spin>
    </div>
    <!-- 添加 -->
    <div class="aModalDistributed" ref="aModalDistributed">
      <a-modal
          v-model="addVisible"
          :maskClosable="false"
          centered
          :mask="false"
          :getContainer="() => $refs.aModalDistributed"
          title="添加分布式节点"
      >
        <template slot="footer">
          <a-button :class="TableButSave" class="butSave" @click="handleSubmit">添加</a-button>
          <a-button :class="TableButReset" @click="addReturnReset" class="butReset">重置</a-button>
        </template>
        <a-form
            hideRequiredMark
            class="addForm"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
            :form="form"
            @submit="handleSubmit"
        >
          <a-form-item v-bind="formItemLayout" label="房间类型" has-feedback>
            <a-select
                v-decorator="[
                'roomType',
                { rules: [{ required: true, message: '请选择房间类型' }] },
              ]"
                placeholder="房间类型"
            >
              <a-select-option value="0"> 手术间</a-select-option>
              <a-select-option value="1"> 床房监护</a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item v-bind="formItemLayout" label="房间编号">
            <a-input
                placeholder="房间编号"
                v-decorator="[
                'roomCode',
                {
                  rules: [
                    {
                      required: true,
                      message: '请输入房间编号',
                    },
                  ],
                },
              ]"
            />
          </a-form-item>

          <a-form-item v-bind="formItemLayout" label="房间名称">
            <a-input
                placeholder="房间名称"
                v-decorator="[
                'roomName',
                {
                  rules: [
                    {
                      required: true,
                      message: '请输入房间名称',
                    },
                  ],
                },
              ]"
            />
          </a-form-item>

          <a-form-item v-bind="formItemLayout" label="分布式节点名称">
            <a-input
                placeholder="分布式节点名称"
                v-decorator="[
                'nodeName',
                {
                  rules: [
                    {
                      required: true,
                      message: '请输入分布式节点名称',
                    },
                  ],
                },
              ]"
            />
          </a-form-item>

          <a-form-item v-bind="formItemLayout" label="分布式节点服务地址">
            <a-input
                placeholder="分布式节点服务地址"
                v-decorator="[
                'nodeUrl',
                {
                  rules: [
                    {
                      required: true,
                      message: '请输入分布式节点服务地址',
                    },
                  ],
                },
              ]"
            />
          </a-form-item>

          <a-form-item v-bind="formItemLayout" label="分布式节点端口号">
            <a-input
                placeholder="分布式节点端口号"
                v-decorator="[
                'nodePort',
                {
                  rules: [
                    {
                      required: true,
                      message: '分布式节点端口号',
                    },
                  ],
                },
              ]"
            />
          </a-form-item>

          <a-form-item v-bind="formItemLayout" label="排序码">
            <a-input-number
                placeholder="排序码"
                @change="handleNumberChange"
                v-decorator="[
                'sortCode',
                {
                  rules: [
                    {
                      required: true,
                      message: '请输入排序码',
                    },
                  ],
                },
              ]"
            />
          </a-form-item>
        </a-form>
      </a-modal>
    </div>
    <!-- 编辑 -->
    <div class="aModalDistributed" ref="aModalDistributed">
      <a-modal
          v-model="editVisible"
          :maskClosable="false"
          centered
          :mask="false"
          :getContainer="() => $refs.aModalDistributed"
          title="编辑分布式节点"
      >
        <template slot="footer">
          <a-button :class="TableButSave" class="butSave" @click="closeEditDist">编辑</a-button>
          <a-button :class="TableButReset" @click="addReturnReset" class="butReset">重置</a-button>
        </template>
        <a-form
            hideRequiredMark
            class="addForm"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
            :form="form"
            @submit="closeEditDist"
        >
          <a-form-item v-bind="formItemLayout" label="房间类型" has-feedback>
            <a-select
                v-decorator="[
                'roomType',
                { rules: [{ required: true, message: '请选择房间类型' }] },
              ]"
                placeholder="房间类型"
            >
              <a-select-option value="0"> 手术间</a-select-option>
              <a-select-option value="1"> 床房监护</a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item v-bind="formItemLayout" label="房间编号">
            <a-input
                placeholder="房间编号"
                v-decorator="[
                'roomCode',
                {
                  rules: [
                    {
                      required: true,
                      message: '请输入房间编号',
                    },
                  ],
                },
              ]"
            />
          </a-form-item>

          <a-form-item v-bind="formItemLayout" label="房间名称">
            <a-input
                placeholder="房间名称"
                v-decorator="[
                'roomName',
                {
                  rules: [
                    {
                      required: true,
                      message: '请输入房间名称',
                    },
                  ],
                },
              ]"
            />
          </a-form-item>

          <a-form-item v-bind="formItemLayout" label="分布式节点名称">
            <a-input
                placeholder="分布式节点名称"
                v-decorator="[
                'nodeName',
                {
                  rules: [
                    {
                      required: true,
                      message: '请输入分布式节点名称',
                    },
                  ],
                },
              ]"
            />
          </a-form-item>

          <a-form-item v-bind="formItemLayout" label="分布式节点服务地址">
            <a-input
                placeholder="分布式节点服务地址"
                v-decorator="[
                'nodeUrl',
                {
                  rules: [
                    {
                      required: true,
                      message: '请输入分布式节点服务地址',
                    },
                  ],
                },
              ]"
            />
          </a-form-item>

          <a-form-item v-bind="formItemLayout" label="分布式节点端口号">
            <a-input
                placeholder="分布式节点端口号"
                v-decorator="[
                'nodePort',
                {
                  rules: [
                    {
                      required: true,
                      message: '分布式节点端口号',
                    },
                  ],
                },
              ]"
            />
          </a-form-item>

          <a-form-item v-bind="formItemLayout" label="排序码">
            <a-input-number
                placeholder="排序码"
                @change="handleNumberChange"
                v-decorator="[
                'sortCode',
                {
                  rules: [
                    {
                      required: true,
                      message: '请输入排序码',
                    },
                  ],
                },
              ]"
            />
          </a-form-item>
        </a-form>
      </a-modal>
    </div>
  </div>
</template>

<script>
import api from '../../api/live/live.js'
import moment from "moment";

export default {
  data() {
    return {
      numVal: 1,
      columns: [
        {
          title: "序号",
          dataIndex: "index",
          key: "index",
          scopedSlots: {customRender: "num"},
          width: 78,
        },
        {
          title: "房间类型",
          dataIndex: "roomType",
          scopedSlots: {customRender: "roomType"},
          width: 100,
        },
        {
          title: "房间编号",
          dataIndex: "roomCode",
          scopedSlots: {customRender: "roomCode"},
          width: 100,
        },
        {
          title: "房间名称",
          dataIndex: "roomName",
          scopedSlots: {customRender: "roomName"},
          width: 150,
        },
        {
          title: "分布式节点名称",
          dataIndex: "nodeName",
          scopedSlots: {customRender: "nodeName"},
          width: 200,
        },
        {
          title: "分布式节点服务地址",
          dataIndex: "nodeUrl",
          scopedSlots: {customRender: "nodeUrl"},
          width: 200,
        },
        {
          title: "分布式节点端口号",
          dataIndex: "nodePort",
          scopedSlots: {customRender: "nodePort"},
          width: 200,
        },
        {
          title: "创建时间",
          dataIndex: "createTime",
          scopedSlots: {customRender: "createTime"},
          width: 200,
          customRender: (text, row, index) => {
            return moment(text).format("YYYY-MM-DD HH:mm:ss");
          },
        },
        {
          title: "排序码",
          dataIndex: "sortCode",
          scopedSlots: {customRender: "sortCode"},
          width: 100,
        },
        {
          title: "操作",
          dataIndex: "operations",
          scopedSlots: {customRender: "operations"},
          width: 100,
        },
      ],
      Loading: false,
      addVisible: false,
      editVisible: false,
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0,
        defaultPageSize: 10,
        showTotal: (total) => `共 ${total} 条数据`,
        pageSizeOptions: ["5", "10", "15", "20"],
        onShowSizeChange: (current) => this.onSizeChange(current),
        onChange: (current, pageSize) => this.onPageChange(current, pageSize),
      },
      data1: [],
      value: 1,
      labelCol: {
        xs: {span: 24},
        sm: {span: 5},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 12},
      },
      formItemLayout: {
        labelCol: {
          xs: {span: 24},
          sm: {span: 8},
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 16},
        },
      },
      editTempId: '',
      tailFormItemLayout: {
        wrapperCol: {
          xs: {
            span: 24,
            offset: 0,
          },
          sm: {
            span: 16,
            offset: 8,
          },
        },
      },
      TableAdmin: 'TableAdmin',
      butAdmin: 'butAdmin',
      TableButSave: 'TableButSave',
      TableButReset: 'TableButReset',
    };
  },
  beforeCreate() {
    this.form = this.$form.createForm(this, {name: "register"});
  },
  mounted() {
    let _this = this;
    this.getDistributed(this.pageNum, this.pageSize);
    window.Event.$on("menuLeft", val => {
      _this.menuLeft = val;
      if (_this.menuLeft != "menuDeaDolour") {
        _this.TableAdmin = 'TableAdmin';
        _this.butAdmin = 'butAdmin';
        _this.TableButSave = 'TableButSave';
        _this.TableButReset = 'TableButReset';
      } else if (_this.menuLeft == "menuDeaDolour") {
        _this.TableAdmin = 'TableAdmin1';
        _this.butAdmin = 'butAdmin1';
        _this.TableButSave = 'TableButSave1';
        _this.TableButReset = 'TableButReset1';
      }
    });
    // _this.menuLeft1 = _this.$store.state.menuLeft;
    _this.menuLeft1 = sessionStorage.getItem('menuLeft')
    if (_this.menuLeft1 != "menuDeaDolour") {
      _this.TableAdmin = 'TableAdmin';
      _this.butAdmin = 'butAdmin';
      _this.TableButSave = 'TableButSave';
      _this.TableButReset = 'TableButReset';
    } else if (_this.menuLeft1 == "menuDeaDolour") {
      _this.TableAdmin = 'TableAdmin1';
      _this.butAdmin = 'butAdmin1';
      _this.TableButSave = 'TableButSave1';
      _this.TableButReset = 'TableButReset1';
    }
  },
  methods: {
    handleNumberChange(value) {
      this.numVal = value;
    },
    onPageChange(current, pageSize) {
      this.pagination.current = current;
      this.pagination.pageSize = pageSize;
      this.getSystemLog();
    },
    onSizeChange(current) {
      this.pagination.current = current;
      this.getSystemLog();
    },
    // 分布式节点列表
    getDistributed() {
      let _this = this;
      api.distNodeGetList(null, {pageNum: _this.pagination.current, pageSize: _this.pagination.pageSize}).then(res => {
        if (res.code == 200) {
          _this.pagination.total = res.data.totalCount;
          _this.data1 = res.data.data
          _this.data1.createTime = moment(_this.data1.createTime).format(
              "YYYY-MM-DD HH:MM:SS"
          );
        }
      })
    },
    // 添加分布式节点
    addDistributed() {
      this.form.resetFields();
      this.addVisible = true;
    },
    // 删除
    Delete(nodeId) {
      let _this = this;
      api.deleteDistNode(null, nodeId).then(res => {
        if (res.code == 200 && res.data == true) {
          _this.$message.success("删除成功");
          _this.getDistributed()
        } else {
          _this.$message.error("删除失败");
          _this.getDistributed()
        }
      })
    },
    // 编辑
    edit(nodeId) {
      console.log(nodeId);
      let _this = this;
      _this.distNodeGetInfo(nodeId)
    },
    distNodeGetInfo(nodeId) {
      let _this = this;
      this.editTempId = nodeId
      api.distNodeGetInfo(null, nodeId).then(res => {
        if (res.code == 200) {
          console.log(res)
        }
      })
      _this.editVisible = true;
    },
    addReturnReset() {
      this.form.resetFields();
    },

    addReturn() {
      this.$router.push("/distributed");
    },
    onChange(value) {
      console.log("changed", value);
    },
    // 添加提交
    handleSubmit(e) {
      let _this = this;
      e.preventDefault();
      _this.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          values.roomType = Number(values.roomType)
          api.addDistNode(null, values).then(res => {
            if (res.code == 200) {
              _this.$message.success("添加成功");
              _this.addVisible = false;
              _this.getDistributed()
            } else {
              _this.$message.error("添加失败");
              _this.addVisible = false;
              _this.getDistributed()
            }
          })
        }
      });
    },
    // 编辑提交
    closeEditDist(e) {
      let _this = this;
      e.preventDefault();
      _this.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          values.roomType = Number(values.roomType)
          values['nodeId'] = this.editTempId
          api.editDistNode(null, values).then(res => {
            if (res.code == 200) {
              _this.$message.success("编辑成功");
              _this.editVisible = false;
              _this.getDistributed()
            } else {
              _this.$message.error("编辑失败");
              _this.editVisible = false;
              _this.getDistributed()
            }
          })
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.distributedWhole {
  position: relative;

  .Loading {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .crumbs {
    display: flex;
    padding-left: 31px;
    margin-top: 14px;

    a,
    area,
    button,
    [role="button"],
    input:not([type="range"]),
    label,
    select,
    summary,
    textarea,
    .ant-breadcrumb {
      font-family: MicrosoftYaHei;
      font-size: 18px;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0px;
      color: #4d4d4d;
    }

    .ant-breadcrumb > span:last-child a {
      font-family: MicrosoftYaHei;
      font-size: 18px;
      font-weight: normal;
      letter-spacing: 0px;
      color: #1e7eff;
    }
  }

  .jiange {
    display: inline-block;
    width: 10px;
  }

  .aTable {
    margin-left: 25px;
    //min-height: 562px;
    width: 1560px;
    background: #ffffff;
    border: 1px solid #c4d7e1;
    border-radius: 6px;
  }

  .addDistributed {
    width: 80%;
    display: flex;
    justify-content: flex-start;
    margin: 10px 0;
    margin-left: 30px;

    .userAbut {
      width: 120px;
      height: 36px;
      border-radius: 30px;
      background-color: #0078b5;
      font-size: 17px;
    }
  }

  .aModalDistributed,
  .aModalDistributed1 {
    .addForm {
      position: relative;

      .surName {
        display: flex;
        justify-content: flex-end;
      }
    }

    .butSave {
      width: 94px;
      height: 30px;
      border-radius: 30px;
      background-color: #0078b5;
      font-size: 16px;
      color: #fff;
      margin-right: 40px;
    }

    .butReset {
      width: 94px;
      height: 30px;
      border-radius: 30px;
      font-size: 16px;
      color: #0376b7;
      border: 1px solid #0376b7;
    }
  }
}
</style>
<style>
.TableAdmin .ant-table-thead > tr > th .ant-table-header-column {
  color: #5a77b1;
}

.TableAdmin1 .ant-table-thead > tr > th .ant-table-header-column {
  color: #238cc3;
}

.TableAdmin .ant-table-thead > tr > th {
  background-color: #fff !important;
  border-bottom: 1px solid #5c78aa !important;
  color: #5a77b1 !important;
  font-size: 16px !important;
  font-weight: bold !important;
  border-top-left-radius: 10px !important;
  border-top-right-radius: 10px !important;
}

.TableAdmin1 .ant-table-thead > tr > th {
  background-color: #fff !important;
  border-bottom: 1px solid #238cc3 !important;
  color: #238cc3 !important;
  font-size: 16px !important;
  font-weight: bold !important;
  border-top-left-radius: 10px !important;
  border-top-right-radius: 10px !important;
}

.aTable {
  position: relative !important;
}

.aModalDistributed .ant-form-item-label,
.aModalDistributed1 .ant-form-item-label {
  display: flex !important;
  width: 150px !important;
  margin-left: 20px !important;
}

.aModalDistributed .ant-form-item-label > label,
.aModalDistributed1 .ant-form-item-label > label {
  color: #747474 !important;
}

.aModalDistributed .ant-input,
.aModalDistributed1 .ant-input {
  width: 300px !important;
  height: 36px !important;
}

.aModalDistributed .ant-select,
.aModalDistributed1 .ant-input {
  width: 300px !important;
  height: 36px !important;
}

.aModalDistributed .ant-form-item-control,
.aModalDistributed1 .ant-form-item-control {
  width: 380px !important;
}

.aModalDistributed .ant-row.ant-form-item,
.aModalDistributed1 .ant-row.ant-form-item {
  width: 600px !important;
  margin-bottom: 10px !important;
  height: 60px !important;
}

.aModalDistributed .ant-modal-content,
.aModalDistributed1 .ant-modal-content {
  width: 500px !important;
  box-shadow: 0px 0px 20px 0px rgba(0, 120, 182, 0.6) !important;
}

.aModalDistributed .ant-cascader-picker,
.aModalDistributed1 .ant-cascader-picker {
  width: 300px !important;
  height: 36px !important;
}

.aModalDistributed .ant-modal-body,
.aModalDistributed1 .ant-modal-body {
  padding-left: 0 !important;
  padding-bottom: 0 !important;
}

.distributedWhole .aTable.ant-table-wrapper .ant-table-body {
  //overflow: hidden !important;
  overflow-x: auto !important;
}
</style>